<template>
  <div class="my_fangbox">
    <div>
      <van-nav-bar title="房间" right-text="完成" right-text-colr="" left-arrow @click-right="onClickRight"
        @click-left="onClickLeft" />
    </div>
    <div>
      <h4 class="my_h4">添加房间</h4>
    </div>
    <div class="my_fang">
      <div>
        <span class="my_lei">选择房间类型</span>
      </div>
      <div>
        <span class="my_fangadd">添加一个</span>
      </div>
    </div>
    <div class="my_selet">
      <var-space direction="column" size="large">
        <var-select variant="outlined" v-model="value">
          <var-option label="客厅" />
          <var-option label="厨房" />
          <var-option label="浴室" />
          <var-option label="卧室" />
        </var-select>
      </var-space>
    </div>
    <div class="my_fang">
      <div>
        <span class="my_lei">房间尺寸㎡</span>
      </div>
      <div>
        <span class="my_fangadd">更多</span>
      </div>
    </div>
    <div class="my_age">
      <div class="my_age1">&lt;15</div>
      <div class="my_age1">16-30</div>
      <div class="my_age1">31-45</div>
      <div class="my_age1">&gt;46</div>
    </div>
    <div class="my_fang">
      <div>
        <span class="my_lei">选择图标</span>
      </div>
      <div>
        <span class="my_fangadd">更多</span>
      </div>
    </div>
    <div class="my_age">
      <div class="my_age2 iconfont icon-xianshiping"></div>
      <div class="my_age2 iconfont icon-anchormao"></div>
      <div class="my_age2 iconfont icon-shouji1"></div>
      <div class="my_age2 iconfont icon-yumao"></div>
      <div class="my_age2 iconfont icon-kaiguan"></div>
    </div>
    <div class="my_fang">
      <div>
        <span class="my_lei">选择设备</span>
      </div>
      <div>
        <span class="my_fangadd">添加一个</span>
      </div>
    </div>
    <div>
      <div class="my_biao">
        <div class="my_biao1">
          <span class="iconfont icon-376"></span>
          <span>园艺名称示例</span>
        </div>
        <div class="my_biao1">
          <span class="iconfont icon-xiyu"></span>
          <span>浴室设备</span>
        </div>
      </div>
      <div class="my_biao">
        <div class="my_biao1">
          <span class="iconfont icon-canju2"></span>
          <span>厨房设备</span>
        </div>
        <div class="my_biao1">
          <span class="iconfont icon-jiudiancanting-"></span>
          <span>餐具</span>
        </div>
      </div>
      <div class="my_biao">
        <div class="my_biao1">
          <span class="iconfont icon-kaiguan"></span>
          <span>电源管理</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { ref } from 'vue';
const value = ref()
const onClickLeft = () => {
  router.push('./Hello')

}
const onClickRight = () => {
  router.push('./Hello')
}
</script>

<style lang="scss" scoped>
.my_fangbox {
  padding: 1rem;

  .my_h4 {
    color: #352C5D;
  }

  .my_fang {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;

    .my_fangadd {
      color: #FB8F66;
    }

    .my_lei {
      color: #352C5D;
    }
  }

  .my_selet {
    margin-top: 1rem;
  }

  .my_age {
    display: flex;
    justify-content: space-around;

    .my_age1 {
      width: 7.2rem;
      height: 5.2rem;
      background-color: #F6F5FA;
      color: #352C5D;
      text-align: center;
      line-height: 5rem;
      box-shadow:  0.2rem 0.4rem rgba(112, 51, 255, 0.1);
      border: 0.1rem solid #f6f5fa;
      border-radius: 1rem;
      margin-top: 1.5rem;
    }

    .my_age2 {
      width: 6.2rem;
      height: 5.2rem;
      background-color: #F6F5FA;
      color: #352C5D;
      text-align: center;
      line-height: 5rem;
      box-shadow:  0.2rem 0.4rem rgba(112, 51, 255, 0.1);
      border: 0.1rem solid #f6f5fa;
      border-radius: 1rem;
      margin-top: 1.5rem;
    }

    .my_age1:hover {
      color: #FB8F66;
      background: #ffffff;
      background-blend-mode: normal;
      box-shadow:  0.2rem 0.4rem rgba(112, 51, 255, 0.1);
      border-radius: 1rem;
    }

    .my_age2:hover {
      color: #FB8F66;
      background: #ffffff;
      background-blend-mode: normal;
      box-shadow:  0.2rem 0.4rem rgba(112, 51, 255, 0.1);
      border-radius: 1rem;
    }
  }

  .my_biao {
    display: flex;
    justify-content: space-around;
    .my_biao1 {
      width: 15rem;
      height: 5.2rem;
      background-color: #F6F5FA;
      color: #352C5D;
      text-align: center;
      line-height: 5rem;
      box-shadow: 0.2rem 0.4rem rgba(112, 51, 255, 0.1);
      border: 0.1rem solid #f6f5fa;
      border-radius: 1rem;
      margin-top: 1.5rem;
    }
    .my_biao1:hover{
      color: #FB8F66;
    }
  }

}
</style>